// 修缮概览弹窗
<template>
  <div class="addDialog">
    <el-dialog :close-on-click-modal="false" title="查看" :visible.sync="dialogVisible" width="1200px" @close="handleDialogClosed">
      <div class="dialogWrap">
        <el-tabs v-model="activeTabName">
          <el-tab-pane label="问题反馈信息" name="first">
            <el-form ref="dialogForm">
              <el-col :span="24">
                <h4 class="dialogItemTitle">工单信息</h4>
              </el-col>
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-form-item label="上报人" class="full">
                    <el-input v-model="repairBillVoList.initiator" readonly />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="上报时间" class="full">
                    <el-input v-model="repairBillVoList.initiateTime" readonly />
                  </el-form-item>
                </el-col>
                <el-col :span="8" class="listFormItem">
                  <el-form-item label="物业名称">
                    <el-input v-model="repairBillVoList.propertyName" readonly />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="问题描述" class="full">
                    <el-input v-model="repairBillVoList.problemDesc" type="textarea" readonly />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="备注" class="full" prop="remarks">
                    <el-input v-model="repairBillVoList.remarks" readonly />
                  </el-form-item>
                </el-col>
              </el-row>

              <!-- 附件 -->
              <el-row :gutter="20" class="album" v-if="dialogVisible">
                <el-col :span="24">
                  <h4 class="dialogItemTitle">附件</h4>
                </el-col>
                <el-col :span="24">
                  <v-upload ref="upload" :busId="repairBillVoList.billId" modelType="repairQuestion" isView />
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="24">
                  <h4 class="dialogItemTitle">审批信息</h4>
                </el-col>
              </el-row>
              <!-- 审批查看 -->
              <el-table :data="repairBillVoList.approveRecordList" style="width: 100%">
                <el-table-column align="center" prop="approvePerson" label="审批人" width="250" />
                <el-table-column align="center" prop="approveTm" label="审批时间" width="160" />
                <el-table-column align="center" prop="approveStatus" label="审批结果" width="160" :formatter="dataFormatter" />
                <el-table-column align="center" prop="approveContent" label="审批意见" />
              </el-table>
            </el-form>
          </el-tab-pane>
          <!-- 预算登记信息 -->
          <el-tab-pane label="预算登记信息" name="second">
            <el-form ref="form">
              <el-col :span="24">
                <h4 class="dialogItemTitle">工单信息</h4>
              </el-col>
              <el-row :gutter="40">
                <el-col :span="12" class="listFormItem">
                  <el-form-item label="物业名称">
                    <el-input v-model="overviewOperationBudgetVo.propertyName" readonly />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="工程名称">
                    <el-input v-model="overviewOperationBudgetVo.engineeringName" readonly />
                  </el-form-item>
                </el-col>
                <el-col :span="24" class="por">
                  <h4 class="mt0 mb0">报价情况</h4>
                </el-col>
              </el-row>

              <el-table ref="multipleTable" :data="overviewOperationBudgetVo.quoteInfoList" class="companyList">
                <el-table-column label="单位名称" prop="clientProviderName" width="300" align="center" />
                <el-table-column label="单位类型" prop="clientProviderType" width="200" align="center" :formatter="dataFormatter" />
                <el-table-column label="报价" prop="quotePrice" width="200" align="center" />
                <el-table-column label="中选" width="150" align="center" prop="isChoice" :formatter="dataFormatter" />
              </el-table>

              <el-row :gutter="40">
                <el-col :span="24">
                  <h4 class="dialogItemTitle">送审情况</h4>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="送审日期">
                    <el-input v-model="overviewOperationBudgetVo.censorshipDate" readonly />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="送审金额">
                    <el-input v-model="overviewOperationBudgetVo.censorshipAmount" readonly />
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item label="核减金额">
                    <el-input v-model="overviewOperationBudgetVo.reductionAmount" readonly />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="审定金额" class="full">
                    <el-input v-model="overviewOperationBudgetVo.approvalAmount" readonly />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-tab-pane>
          <!-- 合同录入信息 -->
          <el-tab-pane label="合同录入信息" name="third">
            <el-form>
              <el-row :gutter="40">
                <el-col :span="8">
                  <el-form-item label="工程名称" class="listFormItem">
                    <el-input v-model="operationContract.engineeringName" readonly />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="单位名称" class="full">
                    <el-input v-model="operationContract.unitName" readonly />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="物业名称" class="full">
                    <el-input v-model="operationContract.propertyName" readonly />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="合同名称" class="full">
                    <el-input v-model="operationContract.businessType" readonly />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="合同编号" class="full">
                    <el-input v-model="operationContract.contractNumber" readonly />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="签订日期">
                    <el-input v-model="operationContract.signTime" readonly />
                  </el-form-item>
                </el-col>

                <el-col :span="8">
                  <el-form-item label="合同金额" class="full">
                    <el-input v-model="operationContract.totalAmount" readonly />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="工期" class="full">
                    <el-input v-model="operationContract.constructionPeriod" readonly>
                      <i slot="suffix">天</i>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="付款方式" class="full">
                    <el-input v-model="operationContract.payMethod" type="textarea" readonly />
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="备注" class="full">
                    <el-input v-model="operationContract.remarks" type="textarea" readonly />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-form-item label="服务价目列表" class="full" prop="operateContractDetailList">
                  <el-table :data="operationContract.contractDetailList">
                    <el-table-column type="index" label="序号" width="50" />
                    <el-table-column prop="unitPrice" label="单价(元/m²)" width="180" />
                    <el-table-column prop="costItems" label="费用项目" />
                    <el-table-column prop="paymentAmount" label="付款金额(元)" />
                    <el-table-column prop="discountAmount" label="折扣金额(元)" />
                    <el-table-column prop="finallyAmount" label="最终金额(元)" />
                  </el-table>
                </el-form-item>
              </el-row>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="付款登记信息" name="fourth">
            <el-table :data="payInfoList">
              <el-table-column label="工程名称" header-align="center" width="180" prop="engineeringName" />
              <el-table-column label="单位名称" align="center" width="140" prop="clientProviderName" />
              <el-table-column label="单位类型" align="center" prop="clientProviderType" width="120" :formatter="dataFormatter" />
              <el-table-column label="付款方式" align="center" width="90" prop="paymentWay" />
              <el-table-column label="付款次数" align="center" width="90" prop="payNumber" />
              <el-table-column label="付款金额" align="center" width="90" prop="payAmount" />
              <el-table-column label="付款日期" align="center" width="140" prop="payDate" />
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="验收登记信息" name="fifth">
            <el-table :data="deliverableInfoList">
              <el-table-column label="工程名称" header-align="center" prop="engineeringName" />
              <el-table-column label="施工单位" align="center" width="150" prop="clientProviderName" />
              <el-table-column label="单位类型" align="center" width="120" prop="clientProviderType" :formatter="dataFormatter" />
              <el-table-column label="验收日期" align="center" :formatter="dataFormatter" width="160" prop="deliverableTm" />
              <el-table-column label="验收评语" align="center" prop="performanceEvaluation" />
              <el-table-column label="备注" header-align="center" width="160" prop="remarks" />
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="结算登记信息" name="sixth">
            <el-table :data="conclusionVoList">
              <el-table-column label="工程名称" header-align="center" prop="engineeringName" />
              <el-table-column label="送审日期(结算)" align="center" prop="settlementTm" :formatter="dataFormatter" />
              <el-table-column label="送审金额(结算)" align="center" prop="censorshipAmount" />
              <el-table-column label="审定金额(结算)" align="center" prop="approvalAmount" />
              <el-table-column label="核减金额(结算)" align="center" prop="reductionAmount" />
              <el-table-column label="送审日期(决算)" align="center" prop="conclusionTm" :formatter="dataFormatter" />
              <el-table-column label="送审金额(决算)" align="center" prop="conclusionAmount" />
              <el-table-column label="审定金额(决算)" align="center" prop="clsAproAmount" />
              <el-table-column label="核减金额(决算)" align="center" prop="clsReductionAmount" />
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div slot="footer">
        <el-button @click="dialogVisible = false">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getOverview } from "@/views/wy-operate/api/repair.js";
export default {
  name: 'overviewDialog',
  data () {
    return {
      //弹窗开关
      dialogVisible: false,
      // tab选中项
      activeTabName: 'first',
      // 验收登记信息
      deliverableInfoList: [],
      // 合同录入信息
      operationContract: {},
      // 预算登记信息
      overviewOperationBudgetVo: {},
      // 付款登记信息
      payInfoList: [],
      // 问题反馈信息
      repairBillVoList: {},
      // 决算信息
      conclusionVoList: [],
    }
  },
  computed: {
    // 单位类型
    providerType () {
      return this.getDict('provider_type')
    }
  },
  methods: {
    //开启弹窗
    show (id) {
      if (!id) return;
      let loading = this.$loading({
        lock: true,
        spinner: 'el-icon-loading',
      });
      getOverview(id).then(res => {
        if (res.data.code === 0) {
          const { deliverableInfoList, operationContractList, overviewOperationBudgetVo, payInfoList, repairBillVoList, conclusionVoList } = res.data.data
          if (Object.keys(overviewOperationBudgetVo).length) {
            overviewOperationBudgetVo.censorshipDate = overviewOperationBudgetVo.censorshipDate.split(' ').shift();
            overviewOperationBudgetVo.reductionAmount = overviewOperationBudgetVo.reductionAmount || 0
          }
          this.payInfoList = payInfoList
          this.conclusionVoList = conclusionVoList
          this.deliverableInfoList = deliverableInfoList
          this.overviewOperationBudgetVo = overviewOperationBudgetVo
          this.repairBillVoList = repairBillVoList.length ? repairBillVoList[0] : {}
          this.operationContract = operationContractList.length ? operationContractList[0] : {}
          this.$nextTick(() => {
            this.dialogVisible = true
          })
        }
      }).finally(() => {
        loading.close()
      })
    },
    // 数据格式化
    dataFormatter (row, column, cellValue) {
      switch (column.property) {
        // 审批结果
        case 'approveStatus':
          const status = {
            '10': '待审核',
            '11': '待审核',
            '12': '审核通过',
            '13': '审核不通过',
            '14': '验收通过',
            '15': '验收未通过'
          }
          return status[cellValue] || ''
        //单位类型
        case "clientProviderType":
          let type = this.providerType.find(item => item.value == cellValue)
          return type ? type.label : "";
        // 是否中选
        case 'isChoice':
          return cellValue == '10' ? '中选' : '不中选';
        // 日期
        case 'deliverableTm':
        case 'conclusionTm':
        case 'settlementTm':
          return cellValue.split(' ').shift();
        default:
          return cellValue
      }
    },
    // 监听弹窗关闭
    handleDialogClosed () {
      for (var i in this.formData) {
        this.formData[i] = ''
      }
    },


  },
}
</script>

<style lang="scss" scoped>
@import "src/views/wy-operate/css/operate.scss";
.addDialog {
  /deep/ .el-date-editor--datetime {
    width: 100%;
  }
}
</style>
